<template>
<div>
    <div class="wrapper qa-content">
        <div class="qa-title">
          <div class="fl title">
           <h2>{{problem.title}}</h2>
           <p>
              <span class="tag">PHPPP</span>
              <span class="author">{{problem.nickname}}</span>
              <span>2小时前提问 · 30分钟前更新</span>
          </p>
          </div>
        <div class="fr share">
            <h4>分享到：</h4>
            <ul class="share-go">
                <li><img src="~/assets/img/widget-weibo.png" alt=""></li>
                <li><img src="~/assets/img/widget-weixin.png" alt=""></li>
                <li><img src="~/assets/img/widget-weibo.png" alt=""></li>
                <li><img src="~/assets/img/widget-weixin.png" alt=""></li>
            </ul>
        
        </div>
        <div class="clearfix"></div>
    </div>

    

     <div class="fl left-list">
            <div class="problem-detail">
         <div class="title-intro">
        <div class="sidebar">

            <button type="button" class="like" data-placement="right" data-toggle="tooltip" title="问题对人有帮助，内容完整，我也想知道答案"><i class="fa fa-caret-up" aria-hidden="true"></i></button>
            <span class="count">0</span>
            <button type="button" class="hate" data-placement="right" data-toggle="tooltip" title="问题没有实际价值，缺少关键内容，没有改进余地"><i class="fa fa-caret-down" aria-hidden="true"></i></button>

        </div>
        <div class="title">
            <div class="detail">
                <!-- 查找填充 -->
              {{problem.content}}

            </div>
            <div class="clearfix"></div>
            <div class="operate">
                <span class="time">{{problem.createtime}}</span>
                <span class="comment">评论</span>
                <span class="edit">编辑</span>
                <span class="jubao">举报</span>
            </div>
            <div class="comment-box">
                <form class="comment-form">
                    <textarea row="1" placeholder="使用评论询问更多信息或提出修改意见，请不要在评论里回答问题"></textarea>
                    <button type="submit" class="sui-btn submit-comment">提交评论</button>
                </form>
                <div class="tips">
                    <p>评论支持部分 Markdown 语法：**bold**_italic_[link](http://example.com)> 引用`code`- 列表。 同时，被你 @ 的用户也会收到通知</p>
                </div>
            </div>

        </div>

    </div>
 <div class="answer-intro">
        <h4 class="answer-num">{{problem.reply}}个回答</h4>
 <div class="answer-intro" v-for="(item,index) in replylist" :key="index">
        <div class="sidebar">
            <button type="button" class="like" data-placement="right" data-toggle="tooltip" title="问题对人有帮助，内容完整，我也想知道答案"><i class="fa fa-caret-up" aria-hidden="true"></i></button>
            <span class="count">0</span>
            <button type="button" class="hate" data-placement="right" data-toggle="tooltip" title="问题没有实际价值，缺少关键内容，没有改进余地"><i class="fa fa-caret-down" aria-hidden="true"></i></button>
        </div>
        <div class="title" >
            <p >
             {{item.content}}
            </p>
            <div class="operate">
                <div class="tool pull-left">
                    <span class="time">1小时前提问</span>
                    <span class="comment">评论</span>
                    <span class="edit">编辑</span>
                    <span class="jubao">举报</span>
                </div>

                <div class="myanswer pull-right">
                   
                </div>
                <div class="clearfix"></div>
            </div>
            
        </div>
        <div class="clearfix"></div>
 </div>
    </div>
    <div class="edit-answer">
        <h4>撰写答案</h4>
        <div class="edit-tip">
            <h4>撰写答案</h4>
            <p>如果你是要对问题或其他回答进行点评或询问，请使用“评论”功能。</p>
            <!-- 编辑器 -->

 <el-dialog
      title="评论"
      :visible.sync="dialogVisible"
      width="40%" >
      <div class="quill-editor"
           :content="content"
           @change="onEditorChange($event)"
           v-quill:myQuillEditor="editorOption">
      </div>
      <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
        </span>
    </el-dialog>

            <div class="editor">
        <div class="btns">
          <button class="sui-btn btn-danger btn-release" @click="dialogVisible=true">发布</button>
        </div>
        <div class="clearfix"></div>
      </div>





        </div>
    </div>
</div>

        </div>

        <div class="fl right-tag">
            <div class="similar-problem">
    <h3 class="title">相似问题</h3>
    <ul class="problem-list">
        <li class="list-item">
            <p class="list-title">求一份浏览器中html css javascript jquery ajax的渲染顺序与原理！！</p>
            <p class="list-info"><a href="">1 回答</a> | 已解决</p>
        </li>
        <li class="list-item">
            <p class="list-title">求一份浏览器中html css javascript jquery ajax的渲染顺序与原理！！</p>
            <p class="list-info"><a href="">1 回答</a> | 已解决</p>
        </li>
         <li class="list-item">
            <p class="list-title">求一份浏览器中html css javascript jquery ajax的渲染顺序与原理！！</p>
            <p class="list-info"><a href="">1 回答</a> | 已解决</p>
        </li>
         <li class="list-item">
            <p class="list-title">求一份浏览器中html css javascript jquery ajax的渲染顺序与原理！！</p>
            <p class="list-info"><a href="">1 回答</a> | 已解决</p>
        </li>
    </ul>
</div>
</div>




    </div>
  </div>
</template>
<script>
import '~/assets/css/page-sj-qa-detail.css'
import problenApi from '@/api/problem'
import replyApi from '@/api/reply'
import axios from 'axios'
import authApi from '@/utils/auth'
export default {
  data(){
    return{
      content: '',
       dialogVisible: false,
        editorOption: {
          // some quill options
          modules: {
            toolbar: [
              [{ 'size': ['small', false, 'large'] }],
              ['bold', 'italic'],
              [{ 'list': 'ordered'}, { 'list': 'bullet' }],
              ['link', 'image']
            ]
          }
        }
    }
  },
  asyncData({params}){
   return axios.all([problenApi.findById(params.id),
                      problenApi.findReplyByProblemId(params.id)]).then(
                          axios.spread(function(problem,reply){
                            return{
                              problem:problem.data.data,
                              replylist:reply.data.data
                            }
                          })
                      )

  },mounted() {
      console.log('app init, my quill insrance object is:', this.myQuillEditor)
    },
    methods: {
      onEditorBlur(editor) {
        console.log('editor blur!', editor)
      },
      onEditorFocus(editor) {
        console.log('editor focus!', editor)
      },
      onEditorReady(editor) {
        console.log('editor ready!', editor)
      },
      onEditorChange({ editor, html, text }) {
        console.log('editor change!', editor, html, text)
        this.content = html
      },
      save(){
        if(authApi.getUser().name===undefined){
            this.$message({
            message:'必须登陆才可以评论哦~',
            type:"warning"
          })
          }
          replyApi.save({content:this.content}).then(res=>{
            
            if(res.data.flag){
              this.$message({
            message:res.data.message,
            type:"success"
          })
          this.dialogVisible=false

          //刷新数据 具体实现再说！
          this.$router.go(0)
            }else{
              this.$message({
            message:res.data.message,
            type:"error"
          })
            }
          })
      }
    }
  

}
</script>
<style>
  .quill-editor {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
  }

</style>